<?php ob_start('ob_gzhandler') ?>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <!--
        /**
        * o------------------------------------------------------------------------------o
        * | This file is part of the RGraph package - you can learn more at:             |
        * |                                                                              |
        * |                          http://www.rgraph.net                               |
        * |                                                                              |
        * | This package is licensed under the RGraph license. For all kinds of business |
        * | purposes there is a small one-time licensing fee to pay and for non          |
        * | commercial  purposes it is free to use. You can read the full license here:  |
        * |                                                                              |
        * |                      http://www.rgraph.net/LICENSE.txt                       |
        * o------------------------------------------------------------------------------o
        */
    -->
    <title>RGraph: HTML5 canvas graph library - Animating your graphs</title>
    
    <meta name="keywords" content="rgraph html5 canvas graph docs animation" />
    <meta name="description" content="RGraph: HTML5 canvas graph software - Documentation about animating your charts" />

    <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
    <link rel="icon" type="image/png" href="../images/favicon.png">
    
    <script src="../libraries/RGraph.common.core.js" ></script>
    <script src="../libraries/RGraph.rose.js" ></script>
    <script src="../libraries/RGraph.bar.js" ></script>
    <script src="../libraries/RGraph.line.js" ></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script>
    <!--[if IE 8]><script src="../excanvas/excanvas.compressed.js"></script><![endif]-->
    
    <script>
        /**
        * The total number of frames, delay and current frame number
        */
        delay    = 35;
        curframe = 1;
        numframe = 20;

        window.onload = function ()
        {
            /**
            * Clear all of the canvases
            */
            RGraph.Clear(document.getElementById("myRose"));

            /**
            * Draw the bar chart
            */
            var multiplier = curframe / numframe;
            var rose = new RGraph.Rose('myRose', [45 * multiplier, 12 * multiplier,
                                           16 * multiplier, 18 * multiplier,
                                           44 * multiplier, 54 * multiplier,
                                           23 * multiplier, 21 * multiplier,
                                           56 * multiplier, 58 * multiplier,
                                           33 * multiplier, 47 * multiplier] );
            rose.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
            rose.Set('chart.ymax', 60); // This stops the scale from changing frame to frame
            rose.Set('chart.hmargin', 5);
            rose.Set('chart.gutter', 30);
            
            // Gradient
            var grad = rose.context.createRadialGradient(rose.canvas.width / 2,
                                                         rose.canvas.height / 2,
                                                         0,
                                                         rose.canvas.width / 2,
                                                         rose.canvas.height / 2,
                                                         150);

            grad.addColorStop(0, 'white');
            grad.addColorStop(1, 'red');

            rose.Set('chart.colors', [grad]);
            rose.Set('chart.strokecolor', null);
            rose.Draw();

            /**
            * If the animation frame is less than number of the total number of frames, redraw the canvas
            */
            if (curframe < numframe) {
                curframe++;
                setTimeout(window.onload, delay);
            }
        }
    </script>
</head>
<body>

    <!-- Social networking buttons -->
    <script src="../libraries/RGraph.common.core.js" ></script>
    
    <script>
        function HideTwitterDIV ()
        {
            document.getElementById("twitter_div").style.opacity = 0;
            document.getElementById("twitter_div").style.display = 'none';
        }


        function ShowTwitterDIV (e)
        {
            var e   = RGraph.FixEventObject(document.all ? event : e);
            var div = document.getElementById("twitter_div");
            var img = document.getElementById("twitter_icon");

            div.style.display = 'block';
            div.style.left    = (RGraph.getCanvasXY(img)[0] + img.offsetWidth - div.offsetWidth + 110) + 'px';
            div.style.top     = (RGraph.getCanvasXY(img)[1] - 1) + 'px';

            /**
            * Fade it in
            */
            setTimeout('document.getElementById("twitter_div").style.opacity = 0.2;', 25);
            setTimeout('document.getElementById("twitter_div").style.opacity = 0.4;', 50);
            setTimeout('document.getElementById("twitter_div").style.opacity = 0.6;', 100);
            setTimeout('document.getElementById("twitter_div").style.opacity = 0.8;', 125);
            setTimeout('document.getElementById("twitter_div").style.opacity = 1.0;', 150);

            e.stopPropagation();

            return false;
        }

        /**
        * This code installs the event handler that hides the Twitter DIV
        */
        if (RGraph.isIE8()) {
             window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
        } else {
            window.addEventListener('click', HideTwitterDIV, false);
        }
    </script>

    <!-- The twitter DIV --> 
    <div id="twitter_div" style="position: absolute;top: 0;left: 0;background-color: #eee;border: 2px dashed black;box-shadow: 0 0 15px #aaa;-moz-box-shadow: 0 0 15px #aaa;-webkit-box-shadow: 0 0 15px #aaa;padding: 3px;display: none;opacity: 0;z-index: 99;"> 
        <a href="http://twitter.com/home/?status=RGraph%3A+HTML5+canvas+graph+library+based+on+the+HTML5+canvas+tag+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas" target="_blank" title="Share on Twitter" rel="nofollow" style="text-decoration: none">Tweet&nbsp;about&nbsp;RGraph</a><br>
        <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a> 
    </div>

    <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
        <script>
            // Opera fix
            if (navigator.userAgent.indexOf('Opera') == -1) {
              document.getElementById("social_icons").style.position = 'fixed';
              document.getElementById("twitter_div").style.position = 'fixed';
    
            }
        </script>
    
        <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
    
    
            <div id="social">
                <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net&notes=RGraph%20is%20a%20HTML5%20based%20graph%20library%20supporting%20a%20wide%20range%20of%20different%20graph%20types:Bar,%20Bipolar,%20Donut,%20Funnel,%20Gantt,%20Horizontal%20Bar,%20LED,%20Line,%20Meter,%20Odometer,%20Pie,%20Progress%20Bar,%20Rose,%20RScatter,%20Scatter%20and%20Traditional%20Radar&title=RGraph:%20HTML5%20canvas%20graph%20library%20based%20on%20the%20HTML5%20canvas%20tag" target="_blank">
                    <img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" /> 
                </a> 
     
                <a href="" target="_blank" onmouseover="if (document.getElementById('twitter_div').style.display == 'none') ShowTwitterDIV(event);" onclick="event.stopPropagation(); event.cancelBubble = true; return false">
                    <img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" />
                </a>
    
    
<!--
                <a title="Post to Google Buzz!" href="" onclick="window.open('http://www.google.com/buzz/post?url=http://www.rgraph.net&imageurl=http://www.rgraph.net/images/logo.png', 'google_buzz_window', 'width=800,height=400,top=100,left=100'); return false">
                    <img src="../images/buzz.png" width="22" height="22" alt="Post to Google Buzz!" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
                </a>
    
    
                <a title="Share RGraph on Facebook" href="" onclick="window.open('http://www.facebook.com/sharer.php?u=http://www.rgraph.net&t=RGraph:%20HTML5%20canvas%20graph%20library', 'facebook_window', 'width=500,height=300,top=100,left=100'); return false">
                    <img src="../images/facebook.png" width="22" height="22" alt="Post to Facebook" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
                </a>
    
                <a href="mailto:share@friendfeed.com" title="Share on FriendFeed"> 
                    <img src="../images/friendfeed.png" width="22" height="22" alt="Share on FriendFeed" border="0" align="absmiddle" /> 
                </a>
    
                <a href="http://www.stumbleupon.com/submit?url=http://www.rgraph.net" target="_blank" title="Share on StumbleUpon" >
                    <img src="../images/stumble.png" alt="Stumble! this site" width="22" height="22" border="0" align="absmiddle" /> 
                </a>
-->
            </div>
    </div>
    <!-- /Social networking buttons -->

    <div id="breadcrumb">
        <a href="../index.html">RGraph: HTML5 canvas graph library</a>
        >
        <a href="index.html">Documentation</a>
        >
        Animating your graphs
    </div>

    <h1>RGraph: HTML5 canvas graph library - Animating your graphs</h1>

    <script>
        if (RGraph.isIE8()) {
            document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the graphs, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag. Click <a href="http://groups.google.com/group/rgraph/browse_thread/thread/c5651ff8c56b8f3c#" target="_blank">here</a> to see some screenshots.</div>');
        }
    </script>

    <div style="float: right">
        <canvas id="myRose" width="300" height="300">[No canvas support]</canvas>
    </div>

    <p>
        Animating your graphs is a relatively easy affair, whilst not being supported natively as it would only serve to
        over-complicate the RGraph libraries. The way to do it is to use
        the function <i>RGraph.Clear(canvas)</i>, passing it your canvas object that is returned by
        <i>document.getElementById()</i>. By default this will cover the canvas in white. You can change this by
        passing it the color you want it to use as the second (optional) argument. You could even use a gradient if
        you wanted. Then you can simply redraw the entire graph.
    </p>
    
    <p>
        One thing you should note, is that you may have to specify the scale manually, to prevent it from changing
        from frame to frame. This can be done by using the <i>chart.ymax</i> property.
    </p>
    
    <p>
        You can review the source of this page if you need further help. Two global variables are set - the number of frames
        and the current frame number (which starts at one). The graphs are then drawn with appropriate data
        (ie the data multiplied by the frame number over the total number of frames). If the frame number is less than
        the total number of frames, the frame number is incremented and the function (window.onload) is called again
        after a small delay.
    </p>
    
    <h4>Animation using jQuery</h4>


    <div style="width: 600px; height: 250px; display: inline; display: inline-block; float: right">
        <canvas id="myLine" width="600" height="250" style="position: relative">[No canvas support]</canvas>
    </div>
    <button style="width: 600px; float: right" id="butAnimate" onclick="Animate(); this.disabled = true; setTimeout(function () {document.getElementById('butAnimate').disabled = false;}, 2000);">Animate!</button>

    <script>
        animate = false;
        ShowGraph();

        /**
        * This is the jQuery animation bit
        */
        function Animate()
        {
            $('#myLine').animate({
                opacity: 0,
                width: 0,
                height: 0,
                left: '+=300px',
                top: '+=125px'
            }, 1000, null, function () {animate = true; ShowGraph();});
        }
        
        function ShowGraph()
        {
            // This clears the canvas            
            document.getElementById("myLine").width = 600;
            
            if (document.getElementById("myLine").__object__ && document.getElementById("myLine").__object__.type == 'line') {
                var bar = new RGraph.Bar('myLine', [4,2,3]);
                bar.Set('chart.labels', ['Fred','Charles','Carl']);
                bar.Set('chart.title', 'jQuery animation example');
                bar.Set('chart.labels.above', true);
                bar.Set('chart.labels.above.size', 16);
                bar.Set('chart.units.post', 'pt');
                bar.Draw();
            
            } else {    
                line = new RGraph.Line('myLine', [4,5,3,4,6,8,4,9,5,2]);
                line.Set('chart.hmargin', 5);
                line.Set('chart.labels', ['Gavin','Hoolio','June','Kev','Lou','Jane','Rich','Tom','John','Pat']);
                line.Set('chart.tickmarks', 'endcircle');
                line.Set('chart.title', 'jQuery animation example');
                line.Draw();
            }

            if (animate) {
                $('#myLine').animate({
                    opacity: 1,
                    width: '600px',
                    height: '250px',
                    left: '-=300px',
                    top: '-=125px'
                }, 1000);
                
                animate = true;
            }
        }
    </script>

    <p>
        You can if you prefer use an external library for animation, like jQuery.
    </p>
    
    <p>
        The graph to the right is animated using
        jQuery. In the example the width is maintained by placing the canvas within a DIV which has the width/height CSS
        attributes set.
    </p>
    
    <p>
        In this instance, the <a href="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" target="_blank">
        Google hosted jQuery</a> is used.
    </p>
    
    
    <br clear="all" />
    <br />
</body>
</html>